<template>
  <div id="login">
    <!-- <div id="login" :style="{ backgroundImage: 'url(' + 'http://121.36.213.28:8080' + configUrl.loginBackImg + ') ' }"> -->
    <div class="login_tool">
      <!-- DATA DANCE -->
    </div>
    <div class="login">
      <el-row>
        <el-col :span="letf" class="login_col" />
        <el-col :span="center" class="login_col" align="center">
          <!-- <img
            class="bj"
            src="../../assets/login.png"
            style="margin-top: 55px;"
          /> -->

          <div class="login_wrap" style="padding: 35px 0px;">
            <h2>
              前端登录
            </h2>
            <div class="login_box">
              <el-form ref="loginForm" :model="loginForm">
                <el-form-item>
                  <el-input
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                    suffix-icon="el-icon-user"
                  />
                </el-form-item>
                <el-form-item class="password">
                  <el-input
                    v-model="loginForm.password"
                    placeholder="请输入密码"
                    suffix-icon="el-icon-lock"
                    type="password"
                    @keyup.enter.native="handleLogin"
                  />
                </el-form-item>
                <el-form-item class="login_btn">
                  <el-button
                    type="primary"
                    @click="handleLogin"
                    v-loading="loading"
                  >
                    立 即 登 录
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
        <el-col :span="right" class="login_col" />
      </el-row>
    </div>
    <!-- <p class="copyright">
      Copyright &copy; 2021 南京道平方科技有限公司
    </p> -->
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      letf: 8,
      center: 8,
      right: 8,
      configUrl: {},
      HexColor: '',
      loginForm: { username: '', password: '' },
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名不能为空' },
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
        ],
      },
      loading: false,
      redirect: undefined,
      src: '', // 验证码图片
    }
  },
  computed: {
    routes() {
      // 动态路由
      return this.$store.getters.routerList
    },
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleLogin() {
      this.$router.push('/dashboard')
      // this.$refs.loginForm.validate((valid) => {
      //   if (valid) {
      //     this.loading = true
      //     this.$store
      //       .dispatch('Login', this.loginForm)
      //       .then(() => {
      //         console.log('success')
      //         this.loading = false
      //         this.$router.push('/dataManage')
      //         // this.$router.push('/')
      //       })
      //       .catch(() => {
      //         console.log('error submit!!')
      //         this.loading = false
      //       })
      //   } else {
      //     return false
      //   }
      // })
    },
  },
}
</script>
<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100%;
  margin: 0px;
  position: relative;
  overflow: hidden;
  background: url('../../assets/bj.jpg') no-repeat;
  background-size: 100% 100%;
  .login_tool {
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 40px;
    font-family: Arial;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  .login {
    height: 522px;
    width: 100%;
    position: absolute;
    top: 20%;
    // margin-top: -230px;
    overflow: hidden;
    // background: url('../../assets/jb.png') repeat center center;
    background: rgba(223, 166, 0, 0.2);
    z-index: 1000;
    .login_col {
      height: 300px;
      .login_wrap {
        height: 365px;
        margin: auto;
        max-width: 460px;
        // background: #ffffff;

        padding: 48px 0px;
        h2 {
          // width: 192px;
          margin: 0 auto;
          margin-bottom: 20px;
          font-size: 24px;
          overflow: hidden;
          position: relative;
          text-align: center;
          color: #fff;
        }
        h3 {
          font-size: 26px;
          font-weight: normal;
          color: rgba(223, 166, 0, 0.2);
          text-align: center;
          margin: 0;
        }
        .login_box {
          width: 100%;
          margin: 0 auto;
          padding: 20px 40px 0 40px;
          height: auto;
          .el-input {
            margin-bottom: 5px;
            input::-webkit-input-placeholder {
              color: #000;
            }
            input::-moz-input-placeholder {
              color: #000;
            }
            input::-ms-input-placeholder {
              color: #000;
            }
            .el-input__inner {
              background: none;
              height: 42px;
              line-height: 42px;
              border: 2px solid #638c4c;
            }
            .el-input__suffix {
              .el-input__suffix-inner {
                .el-input__icon {
                  width: 40px;
                  font-size: 18px !important;
                  line-height: 42px;
                  font-weight: normal;
                }
              }
            }
          }
          .code_wrap {
            .el-input__inner {
              width: 140px;
            }
            .el-input-group__append {
              border: none;
              padding: 0;
              .login-code {
                display: inline-block;
                width: 160px;
                height: 40px;
              }
            }
            .el-input-group__append,
            .el-input-group__prepend {
              background: none;
            }
          }
          .nologin {
            padding: 0 10px;
          }
          .login_btn {
            margin-bottom: 8px;
            text-align: center;
            button.el-button--primary {
              border-radius: 5px;
              width: 180px;
              margin-top: 50px;
              background: #d89125;
              font-size: 18px;
              font-weight: bold;
              border: none;
            }
            button.el-button--primary:hover {
              background: #d89125;
            }
          }
        }
      }
    }
  }
  .dlbg {
    // background: rgba(255, 255, 255, 0.404);
    display: inline-block;
    position: absolute;
    z-index: 100;
    left: 55%;
    top: -10%;
    width: 530px;
    height: 100%;
    border-radius: 50px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    transform-origin: left top;
    // border: 1px solid red;
  }
  .onebj {
    // background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    position: absolute;
    z-index: 100;
    left: 30%;
    top: -10%;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    transform-origin: left top;
    transform: rotate(-18deg);
    -ms-transform: rotate(-18deg); /* IE 9 */
    -moz-transform: rotate(-18deg); /* Firefox */
    -webkit-transform: rotate(-18deg); /* Safari 和 Chrome */
    -o-transform: rotate(-18deg); /* Opera */
  }
  .twobj {
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
    position: absolute;
    z-index: 100;
    left: 30%;
    top: -10%;
    width: 100%;
    height: 110%;
    border-radius: 50px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    transform-origin: left top;
    transform: rotate(-23deg);
    -ms-transform: rotate(-23deg); /* IE 9 */
    -moz-transform: rotate(-23deg); /* Firefox */
    -webkit-transform: rotate(-23deg); /* Safari 和 Chrome */
    -o-transform: rotate(-23deg); /* Opera */
  }
  .threebj {
    background: rgba(255, 255, 255, 1);
    display: inline-block;
    position: absolute;
    z-index: 100;
    left: 30%;
    top: -10%;
    width: 100%;
    height: 120%;
    border-radius: 50px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    transform-origin: left top;
    transform: rotate(-28deg);
    -ms-transform: rotate(-28deg); /* IE 9 */
    -moz-transform: rotate(-28deg); /* Firefox */
    -webkit-transform: rotate(-28deg); /* Safari 和 Chrome */
    -o-transform: rotate(-28deg); /* Opera */
  }
  .copyright {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.3);
  }
}
</style>
